<template>
  <div class="box">
    <div class="logo-box">
      <img src="../assets/icon.jpg" alt="logo" style="height:25px">
      <h3 style="margin-left:8px;">i搜街</h3>
    </div>
    <div class="text-box">
      <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        background-color="#fff" >
        <el-menu-item index="1">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">公司</template>
          <el-menu-item index="2-1">公司介绍</el-menu-item>
          <el-menu-item index="2-2">团队介绍</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">搜索商铺</el-menu-item>
        <el-submenu index="4">
          <template slot="title">成为商家</template>
          <el-menu-item index="4-1">商铺注册</el-menu-item>
          <el-menu-item index="4-2">商铺登录</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">帮把手</template>
          <el-menu-item index="5-1">发布求助</el-menu-item>
          <el-menu-item index="5-2">助人为乐</el-menu-item>
        </el-submenu>
        <el-menu-item index="6" @click="login">登录</el-menu-item>
        <el-menu-item index="7" @click="register">注册</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: 'navibar',
  data() {
    return {
      textList: [
        { name: '首页', innertext: [] },
        { name: '公司', innertext: ['公司介绍', '团队介绍'] },
        { name: '功能', innertext: ['搜街', '帮把手'] },
        { name: '登录', innertext: [] },
        { name: '注册', innertext: [] },
      ],
      currentText: 0,
    };
  },
  methods: {
    clickText(index) {
      this.currentText = index;
    },
    mouseover() {
      console.log('mouseover');
    },
    mouseleave() {
      console.log('mouseleave');
    },
    register() {
      this.$router.replace('/register')
    },
    login() {
      this.$router.replace('/login')
    },
    handleSelect(item) {
      console.log(item);
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 61px;
  background-color: #fff;
  opacity: 0.9;
  display: flex;
}
.height {
  height: 44px;
}
.logo-box {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-box {
  width: 50%;
  height: 44px;
}

.el-menu-item {
  display: block !important;
  margin: 0 !important;
}
.el-submenu {
  width: 88px !important;
}
ul {
  line-height: 44px;
  list-style: none;
  margin: 0;
}
li {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
}
a {
  text-decoration: none;
  color: inherit;
  display: block;
}
</style>
